Vue.js 初心者によるリアクティブの理解

注意書き

Vueを理解する上で、ます始めにリアクティブを理解することが一番重要なのに全く理解できない

そんな初心者がちょっとずつ調べたり聞いたりして、ほんわかと解像度を上げた状態でこのページを書いてる

構成立てて書いていない。必要そうな知識をランダムに吐き出してる。

まずは「リアクティブプログラミング」という手法を理解しないといけない

リアクティブプログラミングとは

値の関係性を記述してプログラミングする

リアクティブで作るVueのシステムも、まさに同じような感じで作り上げていく

「リアクティブオブジェクト」（正式名称は不明）の監視が芋づる式に連携していくイメージ

最初のリアクティブオブジェクトの値が変更された瞬間に、その値の変更を監視してる全てのリアクティブオブジェクトに伝播してく

めっちゃ単純な話！！！

リアクティブオブジェクトを通して出ないと変化が伝わらない！！！！！！！

Vueでうまいこと値が更新されない場合は、リアクティブオブジェクトをちゃんと渡せてないことを疑うべし。

例えば

Vueってテンプレートに値を渡して、値に変化があったら表示も更新される仕組みやけど...

変化したら表示も更新させるためには、絶対にリアクティブオブジェクトを渡してあげないとダメ。

普通の値を渡して表示させることもできるが、その場合、値の変化とかはさせられない。

1つのコンポーネントのライフサイクルを考えたときに、普通の値を最初に与えた場合は、そのコンポーネントが消えるまでずっと一緒の値

逆にリアクティブオブジェクトを渡したら、途中で表示する値を変えたりできる。

実は...リアクティブオブジェクトを単純に渡すだけでは変化は伝播しない

リアクティブオブジェクトを受け取る側の実装も大事

どういう実装になってる必要があるの？

リアクティブオブジェクトの中身の値の変化を検知して、その値を利用してる自分の実装内の値を更新する

こういう実装ができてないとダメ

どうやってそんな実装ができるの？

イベントリスナーを使ってる

リアクティブオブジェクトにはイベントリスナーストアのようなものがあり、そこに値が更新された場合の関数（リスナー）をぶち込んどく

登録するリスナーには、自分の更新したい値が勝手に更新される処理を記載しておく

このような実装にしておけば、リアクティブオブジェクトの値が変更されたときに、リスナーを登録してる（オブジェクトの変化を監視してる）奴らの値を変えることができる

何度でも言う

変化を伝わらせたいなら、リアクティブオブジェクトを渡す！！

リアクティブオブジェクトの連鎖でも渡せる！！！

命のバケツリレーをして変化を伝わらせろ！！！

リアクティブオブジェクトを生み出したり

リアクティブオブジェクトの変化を監視したり

監視して新しい計算してリアクティブオブジェクトを生み出したり

リアクティブに関われるのは以下３つだ！！

リアクティブオブジェクトを作るもの

リアクティブ オブジェクトそのもの

リアクティブオブジェクトを受け入れる準備ができてるもの

propsがリアクティブなのは親子関係が続いている間だけ

らしいよ！！！！！！！！！！